<template>
    <div id="consult">
        <div
            id="entirety"
            style="background-image: url('/static/background/background.png')"
        >
            <div v-show="!showGraph" class="wholeDiv">
                <div class="top-wrapper">
                    <span style="color: white; margin-top: 10px"
                        >已选择云商：</span
                    >
                    <el-tag
                        v-for="item in selectedSupplier"
                        style="margin-right: 20px; margin-top: 10px"
                        :key="item.id"
                        type="success"
                        effect="dark"
                    >
                        {{ item.name }}
                    </el-tag>
                    <el-tag
                        v-for="item in selectedPrivateSupplier"
                        style="margin-right: 20px; margin-top: 10px"
                        :key="item.id"
                        effect="dark"
                    >
                        {{ item.name }}
                    </el-tag>
                    <el-button
                        type="primary"
                        size="mini"
                        @click="initGraph"
                        style="margin-top: 10px"
                        :disabled="
                            this.selectedSupplier.length +
                                this.selectedPrivateSupplier.length <
                            2
                        "
                        >磋商</el-button
                    >
                </div>
                <el-row :gutter="10" style="min-height: 85vh">
                    <!-- 云商列表 -->
                    <el-col :span="8" v-for="item in dataList" :key="item.id">
                        <el-card class="card" style="overflow: auto">
                            <div slot="header" class="clearfix">
                                <span class="title-name">{{ item.name }}</span>
                                <el-tag
                                    type="success"
                                    effect="plain"
                                    size="mini"
                                    >公有云</el-tag
                                >
                                <el-checkbox
                                    v-model="item.checked"
                                    style="float: right; color: white"
                                    >选择</el-checkbox
                                >
                            </div>
                            <el-row>
                                <el-col :span="8">
                                    <el-menu
                                        style="width: 100%"
                                        default-active="network"
                                        background-color="rgba(25,25,12,0)"
                                        text-color="#fff"
                                        active-text-color="#FFB90F"
                                    >
                                        <el-menu-item
                                            index="network"
                                            @click="
                                                chooseMenuItem(item, `network`)
                                            "
                                        >
                                            <span slot="title">网络</span>
                                            <span slot="title"
                                                >{{ item.vpcTotal }}/{{
                                                    item.vpcQuota
                                                }}</span
                                            >
                                        </el-menu-item>
                                        <el-menu-item
                                            index="instance"
                                            @click="
                                                chooseMenuItem(item, `instance`)
                                            "
                                        >
                                            <span slot="title">实例</span>
                                            <span slot="title"
                                                >{{ item.vmTotal }}/{{
                                                    item.vmQuota
                                                }}</span
                                            >
                                        </el-menu-item>
                                        <el-menu-item
                                            index="disk"
                                            @click="
                                                chooseMenuItem(item, `disk`)
                                            "
                                        >
                                            <span slot="title">硬盘</span>
                                            <span slot="title"
                                                >{{ item.volumnTotal }}/{{
                                                    item.volumnQuota
                                                }}</span
                                            >
                                        </el-menu-item>
                                        <el-menu-item
                                            index="dataDisk"
                                            @click="
                                                chooseMenuItem(item, `dataDisk`)
                                            "
                                        >
                                            <span slot="title">数据盘</span>
                                            <span slot="title"
                                                >{{ item.volumnTotal }}/{{
                                                    item.volumnQuota
                                                }}</span
                                            >
                                        </el-menu-item>
                                        <el-menu-item
                                            index="database"
                                            @click="
                                                chooseMenuItem(item, `database`)
                                            "
                                        >
                                            <span slot="title">数据库</span>
                                            <span slot="title"
                                                >{{ item.rdsTotal }}/{{
                                                    item.rdsQuota
                                                }}</span
                                            >
                                        </el-menu-item>
                                    </el-menu>
                                </el-col>
                                <el-col :span="16">
                                    <div
                                        style="padding-left: 15px"
                                        v-loading="item.isLoading"
                                    >
                                        <div
                                            v-if="item.showFlag === `instance`"
                                        >
                                            <el-collapse accordion>
                                                <el-collapse-item
                                                    v-for="instanceItem in item.instanceList"
                                                    :key="
                                                        instanceItem.instanceType
                                                    "
                                                >
                                                    <template slot="title">
                                                        <el-row
                                                            style="
                                                                width: 100%;
                                                                height: 100%;
                                                            "
                                                        >
                                                            <el-col :span="2">
                                                                <span>{{
                                                                    instanceItem.vmTotal
                                                                }}</span>
                                                            </el-col>
                                                            <el-col :span="10">
                                                                <span
                                                                    class="ellipsis"
                                                                    :title="
                                                                        instanceItem.instanceTypeFamilyName
                                                                    "
                                                                    >{{
                                                                        instanceItem.instanceTypeFamilyName
                                                                    }}</span
                                                                >
                                                            </el-col>
                                                            <el-col :span="10">
                                                                <span
                                                                    class="ellipsis"
                                                                    :title="
                                                                        instanceItem.instanceTypeName
                                                                    "
                                                                    >{{
                                                                        instanceItem.instanceTypeName
                                                                    }}</span
                                                                >
                                                            </el-col>
                                                        </el-row>
                                                    </template>
                                                    <el-descriptions
                                                        :column="2"
                                                    >
                                                        <el-descriptions-item
                                                            label="vCPU"
                                                            >{{
                                                                instanceItem.cpuCoreCount
                                                            }}</el-descriptions-item
                                                        >
                                                        <el-descriptions-item
                                                            label="内存"
                                                            >{{
                                                                instanceItem.memorySize
                                                            }}</el-descriptions-item
                                                        >
                                                        <el-descriptions-item
                                                            label="架构"
                                                            >{{
                                                                instanceItem.arch
                                                            }}</el-descriptions-item
                                                        >
                                                        <el-descriptions-item
                                                            label=""
                                                        ></el-descriptions-item>
                                                        <el-descriptions-item
                                                            label="处理器型号"
                                                            >{{
                                                                instanceItem.processorModel
                                                            }}</el-descriptions-item
                                                        >
                                                    </el-descriptions>
                                                </el-collapse-item>
                                            </el-collapse>
                                        </div>
                                        <div
                                            v-else-if="
                                                item.showFlag === `network`
                                            "
                                        >
                                            <el-row
                                                class="detailDiv"
                                                v-for="networkItem in item.networkList"
                                                :key="networkItem.vpcId"
                                            >
                                                <el-col :span="8">
                                                    <span>{{
                                                        networkItem.regionId
                                                    }}</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <span>{{
                                                        networkItem.vpcName
                                                    }}</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <span>{{
                                                        networkItem.cidrBlock
                                                    }}</span>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <div
                                            v-else-if="item.showFlag === `disk`"
                                            class="table_box"
                                        >
                                            <el-table
                                                :data="item.diskList"
                                                :row-style="{ height: '4vh' }"
                                                :cell-style="{ padding: '0' }"
                                                :header-row-style="{
                                                    height: '4vh',
                                                }"
                                                :header-cell-style="{
                                                    padding: '0',
                                                }"
                                                border
                                            >
                                                <el-table-column
                                                    prop="diskName"
                                                    label="类型"
                                                    sortable
                                                    :show-overflow-tooltip="
                                                        true
                                                    "
                                                ></el-table-column>
                                                <el-table-column
                                                    prop="diskSize"
                                                    label="容量"
                                                    sortable
                                                    :show-overflow-tooltip="
                                                        true
                                                    "
                                                >
                                                    <template
                                                        slot-scope="scope"
                                                    >
                                                        <span>{{
                                                            scope.row.diskSize
                                                        }}</span>
                                                        <span>GiB</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    prop="diskTotal"
                                                    label="数量"
                                                    sortable
                                                    :show-overflow-tooltip="
                                                        true
                                                    "
                                                ></el-table-column>
                                            </el-table>
                                        </div>
                                        <div
                                            v-else-if="
                                                item.showFlag === `dataDisk`
                                            "
                                            class="table_box"
                                        >
                                            <el-table
                                                :data="item.dataDiskList"
                                                :row-style="{ height: '4vh' }"
                                                :cell-style="{ padding: '0' }"
                                                :header-row-style="{
                                                    height: '4vh',
                                                }"
                                                :header-cell-style="{
                                                    padding: '0',
                                                }"
                                                border
                                            >
                                                <el-table-column
                                                    prop="diskName"
                                                    label="类型"
                                                    sortable
                                                    :show-overflow-tooltip="
                                                        true
                                                    "
                                                ></el-table-column>
                                                <el-table-column
                                                    prop="diskSize"
                                                    label="容量"
                                                    sortable
                                                    :show-overflow-tooltip="
                                                        true
                                                    "
                                                >
                                                    <template
                                                        slot-scope="scope"
                                                    >
                                                        <span>{{
                                                            scope.row.diskSize
                                                        }}</span>
                                                        <span>GiB</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    prop="diskTotal"
                                                    label="数量"
                                                    sortable
                                                    :show-overflow-tooltip="
                                                        true
                                                    "
                                                ></el-table-column>
                                            </el-table>
                                        </div>
                                        <div
                                            v-else-if="
                                                item.showFlag === `database`
                                            "
                                        >
                                            <el-collapse accordion>
                                                <el-collapse-item
                                                    v-for="databaseItem in item.databaseList"
                                                    :key="databaseItem.id"
                                                >
                                                    <template slot="title">
                                                        <span>{{
                                                            databaseItem.name
                                                        }}</span>
                                                    </template>
                                                    <div class="table_box">
                                                        <el-table
                                                            :data="
                                                                databaseItem.childList
                                                            "
                                                            :row-style="{
                                                                height: '4vh',
                                                            }"
                                                            :cell-style="{
                                                                padding: '0',
                                                            }"
                                                            :header-row-style="{
                                                                height: '4vh',
                                                            }"
                                                            :header-cell-style="{
                                                                padding: '0',
                                                            }"
                                                            border
                                                        >
                                                            <el-table-column
                                                                prop="instanceName"
                                                                label="名称"
                                                                sortable
                                                                :show-overflow-tooltip="
                                                                    true
                                                                "
                                                            ></el-table-column>
                                                            <el-table-column
                                                                prop="dbInstanceClass"
                                                                label="规格"
                                                                sortable
                                                                :show-overflow-tooltip="
                                                                    true
                                                                "
                                                            ></el-table-column>
                                                            <el-table-column
                                                                prop="dbInstanceStorage"
                                                                label="空间"
                                                                sortable
                                                                :show-overflow-tooltip="
                                                                    true
                                                                "
                                                            >
                                                                <template
                                                                    slot-scope="scope"
                                                                >
                                                                    {{
                                                                        scope
                                                                            .row
                                                                            .dbInstanceStorage
                                                                    }}
                                                                    GB
                                                                </template>
                                                            </el-table-column>
                                                        </el-table>
                                                    </div>
                                                </el-collapse-item>
                                            </el-collapse>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>

                    <!-- 私有云云商 -->
                    <el-col
                        :span="8"
                        v-for="item in privateDataList"
                        :key="item.id"
                    >
                        <el-card class="card" style="overflow: auto">
                            <div slot="header" class="clearfix">
                                <span class="title-name">{{ item.name }}</span>
                                <el-tag effect="plain" size="mini"
                                    >私有云</el-tag
                                >
                                <el-checkbox
                                    v-model="item.checked"
                                    style="float: right; color: white"
                                    >选择</el-checkbox
                                >
                            </div>
                            <el-row>
                                <el-col :span="8">
                                    <el-menu
                                        style="width: 100%"
                                        default-active="network"
                                        background-color="rgba(25,25,12,0)"
                                        text-color="#fff"
                                        active-text-color="#FFB90F"
                                    >
                                        <el-menu-item
                                            index="network"
                                            @click="
                                                choosePrivateMenuItem(
                                                    item,
                                                    `network`
                                                )
                                            "
                                        >
                                            <span slot="title">网络</span>
                                            <span slot="title"
                                                >{{
                                                    item.networkList.length
                                                }}/100</span
                                            >
                                            <!--                      <span slot="title">{{item.vpcTotal}}/{{item.vpcQuota}}</span>-->
                                        </el-menu-item>
                                        <el-menu-item
                                            index="instance"
                                            @click="
                                                choosePrivateMenuItem(
                                                    item,
                                                    `instance`
                                                )
                                            "
                                        >
                                            <span slot="title">实例</span>
                                            <span slot="title"
                                                >{{
                                                    item.instanceList.length
                                                }}/200</span
                                            >
                                        </el-menu-item>
                                    </el-menu>
                                </el-col>
                                <el-col :span="16">
                                    <div
                                        style="padding-left: 15px"
                                        v-loading="item.isLoading"
                                    >
                                        <div
                                            v-if="item.showFlag === `instance`"
                                        >
                                            <el-row
                                                class="detailDiv"
                                                v-for="vmItem in item.instanceList"
                                                :key="vmItem.id"
                                            >
                                                <el-col :span="12">
                                                    <span>{{
                                                        vmItem.name
                                                    }}</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <!--                          <span>{{vmItem.cloudProviderType}}</span>-->
                                                    <span>{{
                                                        vmItem.privateIpAddress
                                                    }}</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <span
                                                        >{{ vmItem.cpu }}核
                                                        {{
                                                            vmItem.memory /
                                                            1024 /
                                                            1024 /
                                                            1024
                                                        }}G</span
                                                    >
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <div
                                            v-else-if="
                                                item.showFlag === `network`
                                            "
                                        >
                                            <el-row
                                                class="detailDiv"
                                                v-for="networkItem in item.networkList"
                                                :key="networkItem.id"
                                            >
                                                <el-col :span="8">
                                                    <span>{{
                                                        cutString(
                                                            networkItem.name,
                                                            10
                                                        )
                                                    }}</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <span>{{
                                                        networkItem.physicalNetwork
                                                    }}</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <span>{{
                                                        networkItem.deployPattern ==
                                                        'CLASSIC'
                                                            ? '经典网络'
                                                            : networkItem.deployPattern
                                                    }}</span>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <!-- 私有云云商结束 -->
                </el-row>
            </div>
            <!-- 磋商后返回 -->
            <div v-show="showGraph" class="graphDiv">
                <el-button
                    type="text"
                    size="medium"
                    @click="quitGraph"
                    style="float: right; margin-right: 50px; font-size: 18px"
                    >返回</el-button
                >
                <div style="padding-left: 7%; padding-top: 20px">
                    <el-row>
                        <el-col :span="8">
                            <div
                                class="title-name"
                                style="margin-top: 13vh; font-size: 14pt"
                            >
                                {{ detailData.name }}
                            </div>
                            <el-card class="card" style="overflow: auto">
                                <el-row>
                                    <el-col :span="8">
                                        <el-menu
                                            style="width: 100%"
                                            default-active="network"
                                            background-color="rgba(25,25,12,0)"
                                            text-color="#fff"
                                            active-text-color="#FFB90F"
                                        >
                                            <el-menu-item
                                                index="network"
                                                @click="
                                                    chooseMenuItem(
                                                        dataList[detailDataIdx],
                                                        `network`
                                                    )
                                                "
                                            >
                                                <span slot="title">网络</span>
                                                <span slot="title"
                                                    >{{
                                                        dataList[detailDataIdx]
                                                            .vpcTotal
                                                    }}/{{
                                                        dataList[detailDataIdx]
                                                            .vpcQuota
                                                    }}</span
                                                >
                                            </el-menu-item>
                                            <el-menu-item
                                                index="instance"
                                                @click="
                                                    chooseMenuItem(
                                                        dataList[detailDataIdx],
                                                        `instance`
                                                    )
                                                "
                                            >
                                                <span slot="title">实例</span>
                                                <span slot="title"
                                                    >{{
                                                        dataList[detailDataIdx]
                                                            .vmTotal
                                                    }}/{{
                                                        dataList[detailDataIdx]
                                                            .vmQuota
                                                    }}</span
                                                >
                                            </el-menu-item>
                                            <el-menu-item
                                                index="disk"
                                                @click="
                                                    chooseMenuItem(
                                                        dataList[detailDataIdx],
                                                        `disk`
                                                    )
                                                "
                                            >
                                                <span slot="title">硬盘</span>
                                                <span slot="title"
                                                    >{{
                                                        dataList[detailDataIdx]
                                                            .volumnTotal
                                                    }}/{{
                                                        dataList[detailDataIdx]
                                                            .volumnQuota
                                                    }}</span
                                                >
                                            </el-menu-item>
                                            <el-menu-item
                                                index="dataDisk"
                                                @click="
                                                    chooseMenuItem(
                                                        dataList[detailDataIdx],
                                                        `dataDisk`
                                                    )
                                                "
                                            >
                                                <span slot="title">数据盘</span>
                                                <span slot="title"
                                                    >{{
                                                        dataList[detailDataIdx]
                                                            .volumnTotal
                                                    }}/{{
                                                        dataList[detailDataIdx]
                                                            .volumnQuota
                                                    }}</span
                                                >
                                            </el-menu-item>
                                            <el-menu-item
                                                index="database"
                                                @click="
                                                    chooseMenuItem(
                                                        dataList[detailDataIdx],
                                                        `database`
                                                    )
                                                "
                                            >
                                                <span slot="title">数据库</span>
                                                <span slot="title"
                                                    >{{
                                                        dataList[detailDataIdx]
                                                            .rdsTotal
                                                    }}/{{
                                                        dataList[detailDataIdx]
                                                            .rdsQuota
                                                    }}</span
                                                >
                                            </el-menu-item>
                                        </el-menu>
                                    </el-col>
                                    <el-col :span="16">
                                        <div
                                            style="padding-left: 15px"
                                            v-loading="
                                                dataList[detailDataIdx]
                                                    .isLoading
                                            "
                                        >
                                            <div
                                                v-if="
                                                    dataList[detailDataIdx]
                                                        .showFlag === `instance`
                                                "
                                            >
                                                <el-collapse accordion>
                                                    <el-collapse-item
                                                        v-for="instanceItem in dataList[
                                                            detailDataIdx
                                                        ].instanceList"
                                                        :key="
                                                            instanceItem.instanceType
                                                        "
                                                    >
                                                        <template slot="title">
                                                            <el-row
                                                                style="
                                                                    width: 100%;
                                                                    height: 100%;
                                                                "
                                                            >
                                                                <el-col
                                                                    :span="2"
                                                                >
                                                                    <span>{{
                                                                        instanceItem.vmTotal
                                                                    }}</span>
                                                                </el-col>
                                                                <el-col
                                                                    :span="10"
                                                                >
                                                                    <span
                                                                        class="ellipsis"
                                                                        :title="
                                                                            instanceItem.instanceTypeFamilyName
                                                                        "
                                                                        >{{
                                                                            instanceItem.instanceTypeFamilyName
                                                                        }}</span
                                                                    >
                                                                </el-col>
                                                                <el-col
                                                                    :span="10"
                                                                >
                                                                    <span
                                                                        class="ellipsis"
                                                                        :title="
                                                                            instanceItem.instanceTypeName
                                                                        "
                                                                        >{{
                                                                            instanceItem.instanceTypeName
                                                                        }}</span
                                                                    >
                                                                </el-col>
                                                            </el-row>
                                                        </template>
                                                        <el-descriptions
                                                            :column="2"
                                                        >
                                                            <el-descriptions-item
                                                                label="vCPU"
                                                                >{{
                                                                    instanceItem.cpuCoreCount
                                                                }}</el-descriptions-item
                                                            >
                                                            <el-descriptions-item
                                                                label="内存"
                                                                >{{
                                                                    instanceItem.memorySize
                                                                }}</el-descriptions-item
                                                            >
                                                            <el-descriptions-item
                                                                label="架构"
                                                                >{{
                                                                    instanceItem.arch
                                                                }}</el-descriptions-item
                                                            >
                                                            <el-descriptions-item
                                                                label=""
                                                            ></el-descriptions-item>
                                                            <el-descriptions-item
                                                                label="处理器型号"
                                                                >{{
                                                                    instanceItem.processorModel
                                                                }}</el-descriptions-item
                                                            >
                                                        </el-descriptions>
                                                    </el-collapse-item>
                                                </el-collapse>
                                            </div>
                                            <div
                                                v-else-if="
                                                    dataList[detailDataIdx]
                                                        .showFlag === `network`
                                                "
                                            >
                                                <el-row
                                                    class="detailDiv"
                                                    v-for="networkItem in dataList[
                                                        detailDataIdx
                                                    ].networkList"
                                                    :key="networkItem.vpcId"
                                                >
                                                    <el-col :span="8">
                                                        <span>{{
                                                            networkItem.regionId
                                                        }}</span>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <span>{{
                                                            networkItem.vpcName
                                                        }}</span>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <span>{{
                                                            networkItem.cidrBlock
                                                        }}</span>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                            <div
                                                v-else-if="
                                                    dataList[detailDataIdx]
                                                        .showFlag === `disk`
                                                "
                                                class="table_box"
                                            >
                                                <el-table
                                                    :data="
                                                        dataList[detailDataIdx]
                                                            .diskList
                                                    "
                                                    :row-style="{
                                                        height: '4vh',
                                                    }"
                                                    :cell-style="{
                                                        padding: '0',
                                                    }"
                                                    :header-row-style="{
                                                        height: '4vh',
                                                    }"
                                                    :header-cell-style="{
                                                        padding: '0',
                                                    }"
                                                    border
                                                >
                                                    <el-table-column
                                                        prop="diskName"
                                                        label="类型"
                                                        sortable
                                                        :show-overflow-tooltip="
                                                            true
                                                        "
                                                    ></el-table-column>
                                                    <el-table-column
                                                        prop="diskSize"
                                                        label="容量"
                                                        sortable
                                                        :show-overflow-tooltip="
                                                            true
                                                        "
                                                    >
                                                        <template
                                                            slot-scope="scope"
                                                        >
                                                            <span>{{
                                                                scope.row
                                                                    .diskSize
                                                            }}</span>
                                                            <span>GiB</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="diskTotal"
                                                        label="数量"
                                                        sortable
                                                        :show-overflow-tooltip="
                                                            true
                                                        "
                                                    ></el-table-column>
                                                </el-table>
                                            </div>
                                            <div
                                                v-else-if="
                                                    dataList[detailDataIdx]
                                                        .showFlag === `dataDisk`
                                                "
                                                class="table_box"
                                            >
                                                <el-table
                                                    :data="
                                                        dataList[detailDataIdx]
                                                            .dataDiskList
                                                    "
                                                    :row-style="{
                                                        height: '4vh',
                                                    }"
                                                    :cell-style="{
                                                        padding: '0',
                                                    }"
                                                    :header-row-style="{
                                                        height: '4vh',
                                                    }"
                                                    :header-cell-style="{
                                                        padding: '0',
                                                    }"
                                                    border
                                                >
                                                    <el-table-column
                                                        prop="diskName"
                                                        label="类型"
                                                        sortable
                                                        :show-overflow-tooltip="
                                                            true
                                                        "
                                                    ></el-table-column>
                                                    <el-table-column
                                                        prop="diskSize"
                                                        label="容量"
                                                        sortable
                                                        :show-overflow-tooltip="
                                                            true
                                                        "
                                                    >
                                                        <template
                                                            slot-scope="scope"
                                                        >
                                                            <span>{{
                                                                scope.row
                                                                    .diskSize
                                                            }}</span>
                                                            <span>GiB</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        prop="diskTotal"
                                                        label="数量"
                                                        sortable
                                                        :show-overflow-tooltip="
                                                            true
                                                        "
                                                    ></el-table-column>
                                                </el-table>
                                            </div>
                                            <div
                                                v-else-if="
                                                    dataList[detailDataIdx]
                                                        .showFlag === `database`
                                                "
                                            >
                                                <el-collapse accordion>
                                                    <el-collapse-item
                                                        v-for="databaseItem in dataList[
                                                            detailDataIdx
                                                        ].databaseList"
                                                        :key="databaseItem.id"
                                                    >
                                                        <template slot="title">
                                                            <span>{{
                                                                databaseItem.name
                                                            }}</span>
                                                        </template>
                                                        <div class="table_box">
                                                            <el-table
                                                                :data="
                                                                    databaseItem.childList
                                                                "
                                                                :row-style="{
                                                                    height: '4vh',
                                                                }"
                                                                :cell-style="{
                                                                    padding:
                                                                        '0',
                                                                }"
                                                                :header-row-style="{
                                                                    height: '4vh',
                                                                }"
                                                                :header-cell-style="{
                                                                    padding:
                                                                        '0',
                                                                }"
                                                                border
                                                            >
                                                                <el-table-column
                                                                    prop="instanceName"
                                                                    label="名称"
                                                                    sortable
                                                                    :show-overflow-tooltip="
                                                                        true
                                                                    "
                                                                ></el-table-column>
                                                                <el-table-column
                                                                    prop="dbInstanceClass"
                                                                    label="规格"
                                                                    sortable
                                                                    :show-overflow-tooltip="
                                                                        true
                                                                    "
                                                                ></el-table-column>
                                                                <el-table-column
                                                                    prop="dbInstanceStorage"
                                                                    label="空间"
                                                                    sortable
                                                                    :show-overflow-tooltip="
                                                                        true
                                                                    "
                                                                >
                                                                    <template
                                                                        slot-scope="scope"
                                                                    >
                                                                        {{
                                                                            scope
                                                                                .row
                                                                                .dbInstanceStorage
                                                                        }}
                                                                        GB
                                                                    </template>
                                                                </el-table-column>
                                                            </el-table>
                                                        </div>
                                                    </el-collapse-item>
                                                </el-collapse>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                        <el-col :span="14">
                            <div id="diagramParentDiv">
                                <div
                                    id="diagramDiv"
                                    style="width: 100%; height: 90vh"
                                />
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script src='./js/index.js'>
</script>
<style lang="scss">
@font-face {
    font-family: 'Alternate';
    //src: url('../../assets/iconfont/Alternate.ttf');
    font-style: normal;
    font-width: normal;
}

@import './css/consult.scss';
.ellipsis {
    display: block; /* 或 inline-block，具体根据布局需要调整 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
